<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="utf-8">
		<title>文章推送</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/articleManagement.css" />
	</head>
	<style>
		#articleCon{
			width: 95%;
			margin-left: auto;
			margin-right: auto;
			background-color: white;
			padding: 5px;
		}
		#imgchangeimg{
			margin-left: auto;
    		margin-right: auto;
    		margin-top: 0;
		}
		.addInfoImg{
			display: none;
			padding: 5px 10px;
		}
		.thumbImg{ 
			max-width:100%; 
			max-height:100%; 
			border:none;
		}
		.thumbBox{
			height:275px; 
			width:400px;
			overflow:hidden;
			border-radius:2px; 
			cursor:pointer; 
			position:relative; 
			text-align:center; 
			line-height:275px;
			margin-bottom: 10px;
			background-color: white;
		} 
		.thumbBox::after{ 
			position: absolute;
		    width: 100%;
		    height: 100%;
		    line-height: 133px;
		    z-index: 0;
		    text-align: center;
		    font-size: 20px;
		    left: 0px;
		    top: 0px;
		    color: rgb(159, 159, 159);
		}
		.thumbBox2::after{ 
		    content: "点击选择封面";
		}		
	</style>
	<body>
		<div class="pushInfo-con">
			<div class="layui-row">
				<div class="layui-col-sm12">
					<div class="pushInfo">
						<div class="layui-row">
							<form class="layui-form" action="">
								<div class="layui-col-sm7 layui-col-xs6">
									<div class="layui-form-item">
										<label class="layui-form-label">文章标题</label>
										<div class="layui-input-block">
											<input type="text" name="title" id="title" lay-verify="title" autocomplete="off" placeholder="文章标题" disabled="disabled" class="layui-input layui-disabled">
											<input type="text" id="infoid" name="infoid" style="display:none" />
										</div>	
									</div>
									<div style="height: 25px;"></div>
									<div class="layui-form-item">
										<label class="layui-form-label">发布人</label>
										<div class="layui-input-block">
											<input type="text" name="realName" id="realName" lay-verify="title" autocomplete="off" placeholder="发布人" disabled="disabled" class="layui-input layui-disabled">
										</div>
									</div>
									<div style="height: 25px;"></div>
									<div class="layui-form-item">
										<label class="layui-form-label">来源学校</label>
										<div class="layui-input-block">
											<input type="text" name="school" id="school" lay-verify="title" autocomplete="off" placeholder="来源学校" disabled="disabled" class="layui-input layui-disabled">
										</div>
									</div>
									<div style="height: 25px;"></div>
									<div class="layui-form-item">
										<label class="layui-form-label">发布时间</label>
										<div class="layui-input-block">
											<input type="text" name="createtime" id="createtime" lay-verify="title" autocomplete="off" placeholder="发布时间" disabled="disabled" class="layui-input layui-disabled">
										</div>
									</div>
									<div style="height: 25px;"></div>
									<div class="layui-form-item">
										<label class="layui-form-label">文章类型</label>
										<div class="layui-input-block">
										    <select name="infotype" id="infotype" lay-filter="infotype">
										    	<option value='0'>请选择类型</option>
											</select>
									   </div>
									</div>
								</div>
								<div class="layui-col-sm5 layui-col-xs6">
									<div class="layui-form-item" style="text-align: center;">
										<div class="layui-upload-list thumbBox thumbBox2" id="imgchangeimg">
											<img class="layui-upload-img thumbImg" style="height: 275px; width: 400px; border:none;">
											<input id="inpphotoid" type="text" style="display:none"/>
										</div>
									</div>
									<!-- <div style="text-align: center;">
										<button class="layui-btn layui-btn-primary" id="selectImg" style="height: 275px; width: 400px;">点击选择封面</button>
									</div> -->
									<div>
										<fieldset class="layui-elem-field layui-field-title" style="margin-top: 25px; width: 400px; margin-left: auto; margin-right: auto;">
										  <legend>是否是热点文章</legend>
										  <input type="checkbox" name="ishotarticle" id="ishotarticle" lay-skin="switch" lay-filter="ishotarticle" lay-text="ON|OFF">
										</fieldset>
									</div>
								</div>										
							</form>
							<button type="button" class="layui-btn" id="send" style="float: right; margin-top: 15px;">推送</button>
						</div>											
					</div>
				</div>
			</div>

			<!-- 弹窗调用内容开始 -->
			<div class="addInfoImg" id="addInfoImg">
				<table class="layui-hide" id="selImg" lay-filter="selImg"></table>
				<script type="text/html" id="toolbarDemo">
  					<div class="layui-btn-container">
    					<button class="layui-btn" lay-event="getCheckData">保存</button>
  					</div>
				</script>
			</div>
			<!-- 弹窗调用内容结束 -->
		</div>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript">
			layui.use(['table', 'upload', 'layedit', 'form'], function() {
				var $ = layui.jquery,
					upload = layui.upload,
					table = layui.table,
					layedit = layui.layedit,
					form = layui.form;

				/* 选择图片弹窗 */
				$("#imgchangeimg").click(function(){
				  	var index=layer.open({
						type: 1, 
					    title: '选择文章封面图片',
				        area: ['600px', '80%'],
				        shade: 0.8,
				        content: $('#addInfoImg'),
				        cancel: function(){ 
						   $(".addInfoImg").css("display","none");
						}
				    });
				});
				var ishotarticle = '0';
				//监听指定开关
				form.on('switch(ishotarticle)', function(data) {
					this.checked ? ishotarticle = '1' : ishotarticle = '0';
					//alert(ishotarticle);
					layer.tips('设置为热点文章后便可以在大众端热点文章处查看', data.othis)
				});
				
				$("#send").click(function(){
					var infoid = $("#infoid").val();
					var photoid = $("#inpphotoid").val();
					//var ishotarticle = $("#ishotarticle").val();
					var infotype = $("#infotype").val();
					if(photoid == null || photoid == 0 || photoid == ''){
						layer.alert('请先选择封面！', {icon: 2});
						return;
					}
					if(infotype == null || infotype == 0 || infotype == ''){
						layer.alert('请先选择文章类型！', {icon: 2});
						return;
					}
					$.ajax({
						url: '../informationmanagement/addforwardfrontinformation?infoid=' + infoid + '&photoid=' + photoid + '&ishotarticle=' + ishotarticle + '&infotype=' + infotype,  
				        type: 'get', 
				        dataType: 'json',  
				        success: function (getdata) {
				          if (getdata.code == 10001) { 
				        	  //layer.alert(getdata.msg, {icon: 1});
				        	  layer.closeAll("iframe");			        	  
    			              layer.alert(getdata.msg, {
							    btn: ['确定']
								}, function(){								
					                //刷新父页面
	   			              		parent.location.reload();
		                         	layer.closeAll();
								});
				          }else {
				          	  layer.alert(getdata.msg, {icon: 2});
				          }  
				        },
				        error:function(){ 
				        	 layer.alert('出现错误，请重试！', {icon: 2});
				        }
			    	});
				});
				
				/* 加载文章类型 */
				$.ajax({
					url: '../informationmanagement/getallinfotype',  
			        type: 'get', 
			        dataType: 'json',  
			        success: function (getdata) {
			          if (getdata.code == 0) { 
			        	  var str="";
			        	  for(var i=0;i<getdata.count;i++){
			        		  str+="<option value='" + getdata.data[i].typeid + "'>"+ getdata.data[i].typename +"</option>";
			        	  }
			        	  $("#infotype").append(str);
			        	  form.render("select");
			          }else {}  
			        },
			        error:function(){ }
		    	});

				/* 选择图片弹窗表格 */
			    table.render({
				    elem: '#selImg',
				    url:'../sysimgmanagement/getinforimagelist',
				    toolbar: '#toolbarDemo',
				    cols: [[
						      {
						      	type:'radio'
						      },{
			                    field: 'src',
			                    title: '',
			                    unresize: true,
						      	align: 'center',
			                    sort: false,
			                    style:'height:100%; width:100%;',
			                    templet:function (d) {
			                        return '<div class="layer-photos-demo" style="cursor:pointer;"><img src="/upload/photo/'+d.path+'"></div>';
			                    }
			                }
				    ]],
				    done: function(res, curr, count) { //表格数据加载完后的事件
					    layer.photos({//点击图片弹出
					        photos: '.layer-photos-demo'
					        ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
					    });
					}
				 });
				//选择图片点击保存
			    table.on('toolbar(selImg)', function(obj){
				    var checkStatus = table.checkStatus(obj.config.id);
				    switch(obj.event){
				      case 'getCheckData':
				        var data = checkStatus.data;
				        $("#inpphotoid").val(data[0].photoid);
				        $(".thumbImg").attr("src","/upload/photo/"+data[0].path);
				        $("#imgchangeimg").removeClass("thumbBox2");
				        layer.closeAll();
				        $(".addInfoImg").css("display","none");
				      break;
				    };
				});
			});
		</script>
	</body>
</html>